<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客详情</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
</head>
<body>
<div class="nav">
    <img src="img/1000.webp" alt="">
    <span class="title">我的博客系统</span>
    <div class="spacer" ></div>
    <a href="blog_list.html">主页</a>
    <a href="blog_edit.html.html">写博客</a>
    <a href="#">注销</a>
</div>

<!--这个div 表示页面的主区域（版心) -->
<div class="container">
    <!-- 左侧的用户信息 -->
    <div class="container-left">
        <!-- 用这个元素表示元素的信息 -->
        <div class="card">
            <!-- 用户的头像-->
            <img src="img/3.webp" alt="">
            <!--用户的名字-->
            <h3>王同学</h3>
            <a href="#">github 地址</a>
            <div class="counter">
                <!--span默认是行内元素（也不是永久)，随时都可以改的
                div 默认是块级元素（也不是永久)-->
                <!--行内元素无法设置尺寸 无法设置外边距 内边距左右能设置 上下不能设置-->

                <!-- 盒子模型  外边距 + 边框 + 内边距 + 内容 -->


                <!--display flex 不是子类
                display : flex 是对子元素起作用
                display : block 只对自己有用
                -->
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                <span>2</span>
                <span>1</span>
            </div>



        </div>

    </div>
    <!--右侧内容区域-->
    <div class="cntainer-right">
        <div class="blog_detail">
            <h3>我的第一篇博客</h3>
            <div class="date">2022-11-06 12:00:00</div>
            <p>
                从今天起，我要认真写代码。
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
                wdwaawdawdwadwwwwwwwwwwwwwwwwwww
                awdddddddddddddddddddddddd
                awdddddddddddddddddddd
                awddddddddddddddddddddddddd
                awdddddddddddddddddddddd
                awdddddddddddd
            </p>

        </div>


        </div>
</div>


</body>
</html>